<template>
	<view class="container">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="content">隐患列表</block>
		</cu-custom>
		<!-- 顶部面板 -->
		<view class="top--panel">
			<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
			<view style="background-color: white;text-align: center;font-size: 28rpx;padding: 10px 0;color: black;">
				<view class="search" @click="showDrawer">
					<uni-icons type="search" size="15"></uni-icons>搜索
				</view>
			</view>
		</view>
		<!-- 滚动区域 -->
		<view class="scroll-panel" id="scroll-panel">
			<view class="list-box">
				<view class="left">
					<scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }"
						:scroll-into-view="leftIntoView">
						<view class="item" v-for="(item, index) in leftArray" :key="index"
							:class="{ active: index == leftIndex }" :id="'left-' + index" :data-index="index"
							@tap="leftTap">
							{{ item.typeName }}
						</view>
					</scroll-view>
				</view>
				<view class="main">
					<scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }" @scroll="mainScroll"
						:scroll-into-view="scrollInto" scroll-with-animation="true">
						<view class="item main-item" v-for="(item, index) in mainArray" :key="index"
							:id="'item-' + index">
							<view class="title">
								<view class="text">{{ item.typeName }}</view>
							</view>
							<view v-for="(criteria, index2) in item.criteriaList" :key="index2">
								<!-- <view class="title">
									<view class="h6">{{ data.checkContent }}</view>
								</view> -->
								<view class="goods">
									<view class="h5">
										<view class="span" @click="gotodetail(criteria)">{{ criteria.checkCriteria }}
										</view>
										<view class="h1">
											<view v-if="criteria.status != 3 && criteria.num == 0" class="h2 background icon-jinzhi" @click="errorshow(criteria,3)">
											</view>
											<!-- <view class="h3 background icon-zhengque2" @click="errorshow(criteria,1)">
											</view> -->
										</view>
										<!-- <view class="h3 icon-zhengque2" v-if="criteria.status == 1"></view> -->
										<view class="h4" v-if="criteria.status == 2">隐患数：{{ criteria.num }}</view>
										<view class="h2" v-if="criteria.status == 3">
											<view class="one icon-jinzhi"></view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="fill-last" :style="{ height: fillHeight + 'px' }"></view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 底部面板 -->
		<view class="bottom-panel" id="bottom-panel">
			<!-- 底部面板，可添加所需要放在页面底部的内容代码。比如购物车栏目 -->
			<view class="footer">
				<view class="h6">{{schoolName}} </view>
				<view class="h5">隐患数：{{tal()}} </view>
				<view class="h4" v-if="compCheckStatus" @click="compCheck">完成排查</view>
			</view>
		</view>
		<!-- 搜索 -->
		<view class="box">
			<uni-drawer ref="showLeft" :width="320" mode="right">
				<!-- <button @click="closeDrawer">关闭Drawer</button> -->
				<view class="formbox">
					<view class="positop">
						<view class="h5">隐患项清单</view>
						<uni-search-bar @confirm="searchData" v-model="searchValue"></uni-search-bar>
						<view class="h4"><span style="color: red;">*</span>请选择隐患项</view>
					</view>

					<uni-forms ref="form">
						<view class="ul border" v-for="item in formData" @click="gotodetail(item,item.id)">
							<!-- <view class="c1 bootm">深圳市龙岗区捷程职业技术培训学校</view> -->
							<view class="c2 bootm">{{item.dangerDesc}}</view>
							<view class="c5">{{item.level}}</view>
						</view>

					</uni-forms>
				</view>
				<!-- 	<view class="uni-btn-v">
						<button type="warn" @click="submit">提交</button>
					</view> -->
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	import server from '@/api/server.js'
	export default {
		data() {
			return {
				compCheckStatus: true,
				scrollHeight: 400,
				scrollTopSize: 0,
				searchValue: '',
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
				leftArray: [],
				mainArray: [],
				formData: [],
				schoolName: '',
				checkNum: '',
				topArr: [],
				leftIndex: 0,
				scrollInto: ''
			};
		},
		computed: {
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 3 ? this.leftIndex - 3 : 0}`;
			}
		},
		onShow() {
			this.checkNum = this.$root.$mp.query.checkNum
			this.schoolName = this.$root.$mp.query.schoolName
			this.compCheckStatus = this.$root.$mp.query.checkStatus == '0'
			console.log(this.checkNum)
			console.log(this.schoolName)
			/* 等待DOM挂载完成 */
			this.$nextTick(() => {
				/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
				setTimeout(() => {
					/* 等待滚动区域初始化完成 */
					this.initScrollView().then(() => {
						/* 获取列表数据，你的代码从此处开始 */
						this.getListData();
					});
				}, 200);
			});
		},
		mounted(){
			this.$refs["showLeft"].close();
		},
		methods: {
			cycleclick(){
				this.mainArray.forEach((item,index) => {
					item.criteriaList.forEach((items,inx) => {
							if(items.status == null || items.status == ''){
								server.schoolcheckdetailadd({
									checkCriteriaId: items.id,
									schoolCheckId: this.$root.$mp.query.checkId,
									status: 1
								}).then(res => {
									this.fun_c()
								})		
							}
					})
				})
			
			},
			fun_c(){
				server.criterialistByCheck({
					checkId: this.$root.$mp.query.checkId
				}).then(res => {
						console.log(res)
						this.leftArray = res.data.result;
						this.mainArray = res.data.result;
				
				})
			},
			tal(){
				let num = 0;
				this.mainArray.forEach((item,index) => {
					item.criteriaList.forEach((items,inx) => {
						num += items.num
					})
				})
				return num
			},
			errorshow(item, index) {
				uni.showModal({
					title: '提示',
					content: index == 1 ? '确定该排查项无问题' : '确定该排查项与本次排查无关',
					success: (showResult) => {
						if (showResult.confirm) {
							// uni.showLoading()
							if(index == 3){
								server.schoolcheckdetailedit({
									checkCriteriaId: item.id,
									schoolCheckId: this.$root.$mp.query.checkId,
									status:index
								}).then(res => {
										console.log(res)
										if(res.data.code == 200){
											this.$tip.success('修改成功!')
											this.getListData()
										}
										// uni.hideLoading();
								})
							}else{
								server.schoolcheckdetailadd({
									checkCriteriaId: item.id,
									schoolCheckId: this.$root.$mp.query.checkId,
									status: index
								}).then(res => {
									console.log(res)
									if (res.data.code == 200) {
										this.$tip.success('修改成功!')
										this.getListData()
									}
									// uni.hideLoading();
								})
								
							}

						}

					}
				})
			},
			gotodetail(item, id) {
				if (id) {
					uni.navigateTo({
						// ? 后面加要传的参数， 多个参数用 & 隔开 
						url: '/pages/education/troublesdetail?id=' + item.educationCriteriaId +
							'&checkCriteria=' + item.checkCriteria + '&checkId=' + this.$root.$mp.query.checkId +
							'&searchId=' + id
					})
				} else {
					uni.navigateTo({
						// ? 后面加要传的参数， 多个参数用 & 隔开 
						url: '/pages/education/troublesdetail?id=' + item.id + '&checkCriteria=' + item
							.checkCriteria + '&checkId=' + this.$root.$mp.query.checkId
					})
				}

			},
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('#scroll-panel');
					view.boundingClientRect(res => {
						console.log(res)
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height;
						this.$nextTick(() => {
							resolve();
						});
					}).exec();

				});
			},
			/* 获取列表数据 */
			getListData() {
				uni.showLoading();
				server.criterialistByCheck({
					checkId: this.$root.$mp.query.checkId
				}).then(res => {
					this.$nextTick(function() {
						console.log(res)

						uni.hideLoading();
						this.leftArray = res.data.result;
						this.mainArray = res.data.result;
						this.tal()
						this.cycleclick()
						// DOM 挂载后 再调用 getElementTop 获取高度的方法。
						this.$nextTick(() => {
							this.getElementTop();
						});
					});

				})
			},
			compCheck() {
				let index = 0
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定完成排查',
					success: (showResult) => {
						if (showResult.confirm) {
							this.mainArray.forEach(item => {
								item.criteriaList.forEach(v => {
									if (v.status == null) {
										index++
									}
								})


							})
							if (index == 0) {
								let object = {
									id: this.$root.$mp.query.checkId,
									status: 1,
								}
								server.schoolcheckedit(object).then(res => {
									console.log(res)
									that.compCheckStatus = false
									uni.showToast({
										title: '全部已完成复查',
										duration: 2000,
										icon: 'none'
									});
								})
							} else {
								uni.showToast({
									title: '还有' + index + '项隐患未复查',
									duration: 2000,
									icon: 'none'
								});
							}

						}

					}
				})


			},
			/* 获取元素顶部信息 */
			getElementTop() {
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().selectAll('.main-item');
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then(res => {
					let topArr = res.map(item => {
						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					});
					this.topArr = topArr;
					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last - 20 < this.scrollHeight) {
						this.fillHeight = this.scrollHeight - last + 20;
					}
				});
			},
			/* 主区域滚动监听 */
			mainScroll(e) {
				let top = e.detail.scrollTop;
				let index = 0;
				/* 查找当前滚动距离 */
				for (let i = this.topArr.length - 1; i >= 0; i--) {
					/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					if (top + 2 >= this.topArr[i]) {
						index = i;
						break;
					}
				}
				this.leftIndex = index < 0 ? 0 : index;
			},
			showDrawer() {
				this.getlistByCheck('')
				this.$refs["showLeft"].open();
			},
			getlistByCheck(searchValue) {
				server.educationrectifyCheck({
					dangerDesc: searchValue
				}).then(res => {
					console.log(res)
					this.formData = res.data.result
					this.$nextTick(function() {

					});

				})
			},
			// 搜索回车
			searchData(e) {
				console.log(e)
				this.getlistByCheck(e.value)
			},
			/* 左侧导航点击 */
			leftTap(e) {
				let index = e.currentTarget.dataset.index;
				this.scrollInto = `item-${index}`;
			}
		}
	};
</script>

<style lang="scss">
	page,
	.container {
		height: 100%;
	}

	/* 容器 */
	.container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&>view {
			width: 100%;
		}

		.scroll-panel {
			flex-grow: 1;
			height: 0;
			overflow: hidden;
		}

		.bottom-panel {
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

		}
	}

	.list-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 28rpx;

		.left {
			width: 200rpx;
			background-color: #f6f6f6;
			box-sizing: border-box;
			box-sizing: border-box;
			font-size: 32rpx;

			.item {
				padding-left: 20rpx;
				position: relative;
				padding: 10px;

				&:not(:first-child) {
					margin-top: 1px;

					&::after {
						content: '';
						display: block;
						height: 0;
						border-top: #d6d6d6 solid 1px;
						width: 620upx;
						position: absolute;
						top: -1px;
						right: 0;
						transform: scaleY(0.5);
						/* 1px像素 */
					}
				}

				&.active {
					color: #42b983;
					background-color: #fff;
				}
			}

			.fill-last {
				height: 0;
				width: 100%;
				background: none;
			}
		}

		.main {
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;

			.title {
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				background-color: #fff;
				position: sticky;
				top: 0;
				z-index: 19;

				.text {
					color: blue;
				}

				.h6 {
					color: black;
				}
			}

			.item {
				padding-bottom: 10rpx;
				border-bottom: #eee solid 1px;
				padding-right: 8px;
			}

			.goods {
				// display: flex;
				// flex-direction: row;
				// flex-wrap: nowrap;
				// justify-content: flex-start;
				// align-items: center;
				// align-content: center;
				margin-bottom: 10rpx;

				&>image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 16rpx;
					margin-left: 2px;
				}

				.describe {
					font-size: 24rpx;
					color: #999;
				}

				.money {
					font-size: 24rpx;
					color: #efba21;
				}
			}
		}
	}

	.goods {
		.h5 {
			border-bottom: 1px solid #ccc;
			padding-bottom: 10px;

			.span {}

			.h4,
			.h3,
			.h2 {
				border-radius: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 20px;
				margin-top: 5px;
			}

			.h4 {
				border: 1px solid red;
				color: red;
			}

			.h3 {
				border: 1px solid #52c41a;
				color: #52c41a;
				width: 100%;
			}

			.h3.background {
				background: #52c41a;
				color: white;
			}

			.h2 {
				border: 1px solid orange;
				color: orange;
				width: 100%;
			}

			.h2.background {
				background: orange;
				color: white;
			}

			.h1 {
				display: flex;
				justify-content: space-between;
			}
		}

	}

	.footer {
		padding: 20px 15px;
		background: white;
		box-shadow: 2px 1px 8px 0px;

		.h6 {
			float: left;
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 10px;
			font-size: 20px;
			position: relative;
			padding-left: 10px;
		}

		.h6:before {
			width: 5px;
			content: '';
			height: 21px;
			background-color: #007aff;
			display: inline-block;
			border-radius: 7px;
			position: absolute;
			top: 0;
			left: 0;
		}

		.h5 {
			font-size: 14px;
		}

		.h4 {
			position: fixed;
			right: 10px;
			bottom: 50px;
			background-color: #007aff;
			padding: 5px 10px;
			color: white;
			border-radius: 30px;
		}
	}

	.search {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		border-radius: 5px;
		background-color: rgb(248, 248, 248);
		width: 90%;
		margin: auto;
		padding: 3px;
		color: #B3B3B3;
		height: 36px;

		.uni-icons {
			margin-right: 5px;
			font-size: 18px !important;
			color: rgb(192, 196, 204) !important;
		}
	}

	.box .formbox .ul .c5 {
		padding: unset;
		border-radius: 50%;
		width: 30px;
		line-height: 30px;
		height: 30px;
		text-align: center;
		font-size: 18px;
	}
</style>
